<template>
    <Dialog :app-dialog="appDialog" @close="closeDialog">
        <!-- 搜索 -->
        <ZWSearch :option="searchOption" @search="search" @reset="reset" />
        <!-- 查询结果 -->
        <ZWTable
            ref="TableRef"
            class="table-box"
            tab-h="400px"
            :multiple="false"
            :option="tableOption"
            :selected-ids="selectedIds"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            @select="onSelect"
            @select-all="onSelectAll" />
    </Dialog>
</template>
<!-- 选择门店 -->
<!-- 选择门店 -->
<!-- 选择门店 -->
<script setup lang="tsx">
import { reactive, ref, onMounted, computed, watch } from 'vue';
import { ElMessage } from 'element-plus';
import Dialog from '@/components/Dialog.vue';
import { getStoreList } from '@/api/ecommerce/storeManage';
import { getSensitivelist } from '@/api/employe/storemanagement/sensitiveWord';
import ZWSearch from '@/components/zw/search-form/SearchForm';
import ZWTable from '@/components/zw/table/Table';
import { deepCopy } from '@/utils/helper';

const TableRef = ref<HTMLElement | null>();
const selectedArr = reactive<any>([]);

interface Props {
    modelValue: boolean;
    show: boolean;
    multiple: boolean;
    selectedMember: Array<unknown>;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: false,
    show: false,
    multiple: true,
    selectedMember: () => []
});

const emit = defineEmits(['update:modelValue', 'update:show', 'submit']);

const defaultParams = {
    page: 1,
    page_size: 15
};

const selectedIds = computed(() => props.selectedMember.map((item: any) => item.id));

const state = reactive({
    searchParams: deepCopy(defaultParams)
});
const searchOption = computed(() => {
    return [
        {
            label: '门店搜索',
            name: 'search_value',
            value: '',
            type: 'input',
            placeholder: '请输入门店名称/门店地址'
        }
    ];
});
const tableOption = [
    {
        type: 'selection',
        width: 60,
        fixed: 'left'
    },
    {
        label: '编码',
        width: 80,
        render({ index }: any) {
            return index + 1;
        }
    },
    {
        prop: 'store_name',
        label: '名称',
        width: 160,
        render({ row }: any) {
            return row?.store_name || '--';
        }
    },
    {
        prop: 'regional_area',
        label: '行政区域',
        width: 220,
        render({ row }: any) {
            return row?.regional_area || '--';
        }
    },
    {
        prop: 'store_address',
        label: '地址',
        width: 240,
        render({ row }: any) {
            return row?.store_address || '--';
        }
    },
    {
        prop: 'lat',
        label: '经纬度',
        width: 200,
        render({ row }: any) {
            return (
                <>
                    <div>经度{row?.lat || '--'}</div>
                    <div>纬度{row?.lon || '--'}</div>
                </>
            );
        }
    },
    {
        prop: 'staff_num',
        label: '门店员工',
        width: 160,
        render({ row }: any) {
            return row?.staff_num || '--';
        }
    },
    {
        prop: 'group_name',
        label: '所属分组',
        width: 160,
        render({ row }: any) {
            return row?.group_name || '--';
        }
    },
    {
        prop: 'created_name',
        label: '创建人',
        width: 140,
        render({ row }: any) {
            return row?.created_name || '--';
        }
    },
    {
        prop: 'created_at',
        label: '创建时间',
        width: 240,
        render({ row }: any) {
            return row?.created_at || '--';
        }
    },
    {
        prop: 'store_status',
        label: '状态',
        width: 120,
        render({ row }: any) {
            if (row.store_status == 1) {
                return <span style="color: #60B900">正常</span>;
            } else {
                return <span style="color: #969696">关闭</span>;
            }
        }
    }
];

const search = (data: any): void => {
    state.searchParams = data;
    selectedArr.splice(0);
    TableRef.value.clearSelection();
};
const reset = (v: any): void => {
    state.searchParams = deepCopy(defaultParams);
    selectedArr.splice(0);
    TableRef.value.clearSelection();
};
const closeDialog = () => {
    state.searchParams = deepCopy(defaultParams);
};

const fetchApi = (): any => {
    return new Promise((resolve: any): any => {
        const group_id = 'all';
        const params = { group_id };
        resolve([params, getSensitivelist]);
    });
};
// 选中表格 checkbox
const onSelect = (selection: any, row: any): void => {
    if (appDialog.multiple) {
        selectedArr.splice(0);
        selectedArr.push(...selection);
    } else {
        // TableRef.value.reload()
        selectedArr.splice(0);
        selectedArr.push(row);
    }
};

const onSelectAll = (selection: any): void => {
    selectedArr.splice(0);
    selectedArr.push(...selection);
};

// 取消
const cancelHandel = (): void => {
    appDialog.visible = false;
};
//确定
const submitHandel = (): void => {
    emit('submit', selectedArr);
    cancelHandel();
};
const appDialog = reactive({
    visible: false,
    title: '选择门店',
    width: '900px',
    multiple: false,
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存'
});

watch(
    () => appDialog.visible,
    (val: boolean) => {
        emit('update:show', val);
    },
    { deep: true, immediate: true }
);
watch(
    () => props.show,
    (val: boolean) => {
        appDialog.visible = val;
    },
    { deep: true, immediate: true }
);

defineExpose({
    appDialog
});
</script>

<style lang="scss" scoped>
:deep .table_header_title {
    height: 60px;
    th.el-table__cell {
        background: #f9f9f9;
        padding: 10px 0;
    }
}

:deep .el-table__row {
    .el-table__cell {
        .store_msg {
            display: flex;
            align-items: center;
            .avator {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                overflow: hidden;
                background-color: #eee;
                margin-right: 6px;
                .store_avator {
                    width: 100%;
                    height: 100%;
                }
            }
            .content {
                & > div {
                    font-size: 12px;
                    line-height: 1;
                }
                .store_name {
                    margin-bottom: 10px;
                }
            }
        }
    }
}

.table-box {
    // height: 500px;
    // overflow: auto;
}
</style>
